import {View, Text, Image, TouchableOpacity, StyleSheet} from 'react-native';
import React from 'react';
export interface SearchListProps {
  content: string;
  flag: number;
}
type SearchListCellProps = SearchListProps & {
  onClickCell: (content: string) => void;
};
export const SearchListCell = (props: SearchListCellProps) => {
  const {onClickCell, content, flag} = props;
  const icon =
    flag === 1
      ? require('../image/history.png')
      : require('../image/search.png');
  return (
    <TouchableOpacity onPress={() => onClickCell(content)}>
      <View style={styles.container}>
        <View style={styles.outer}>
          <Image source={icon} style={styles.listIcon} />
          <Text style={styles.listText}>{content}</Text>
        </View>
        <Image
          source={require('../image/arrow-top-left.png')}
          style={styles.topRightImg}
        />
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: 60,
    paddingHorizontal: 20,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  outer: {flex: 1, flexDirection: 'row', alignItems: 'center'},
  listIcon: {width: 20, height: 20, tintColor: 'white'},
  topRightImg: {width: 20, height: 20, tintColor: 'white'},
  listText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
    marginLeft: 20,
  },
});
